<template>
  <div>
    <van-tabbar v-model="active" class="tabber-one">
      <van-tabbar-item name="home" class="wb" @click="jumpPage()"><span id="elp" class="el-icon-eleme" ></span> <span class="op">外卖</span> </van-tabbar-item>
      <van-tabbar-item name="search" icon="search" @click="jumpSearch()">搜索</van-tabbar-item>
      <van-tabbar-item name="friends" icon="description" @click="jumpOrder()">订单</van-tabbar-item>
      <van-tabbar-item name="setting" icon="user-o" @click="jumpMy()">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "tabber",

  data() {
    return {
      active: "home",
    };
  },
  mounted() {},
  methods: {
    jumpOrder() {//跳转订单
      this.$router.push({
        name: "orderVal",
      });
    },
    jumpPage(){//李凯---跳转首页
    this.$router.push({
        name: "outsell",
      });
    },
    jumpSearch(){
        this.$router.push({
            name:"searchVal"
        });
    },  
    jumpMy(){
        this.$router.push({
            name:"myVal"
        });
    }
  },
};
</script>

<style scoped>
.tabber-one {
  z-index: 1;
  width: 100%;
  /* height: 0.5rem; */
}
#elp{
  font-size: 22px;
  display: block;
  
}
.op{
  display: block;
  margin-top: 3px;
}
.wb{
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 3px;
}
</style>